pagetutor.com - HTML tutorials for the rest of us

Javascript Tutor - Lesson 22

There are probably a couple ways to solve this problem. One solution would be to send two values to the function...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"><!--

function FruitBox(whichfruit, fruitname)
{
   window.document.myform.fruit[whichfruit].checked = true;
   window.document.myform.fruit.value = fruitname;
}

//--></SCRIPT>

</HEAD>
<BODY>

<FORM NAME="myform">
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value = 'oranges'">Oranges & Tangerines<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value = 'bananas'">Bananas<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value = 'peaches'">Peaches, Nectarines & Plums<BR>
To select Oranges <A HREF="javascript:FruitBox(0,'oranges')">click here</A>.<BR>
To select Bananas <A HREF="javascript:FruitBox(1,'bananas')">click here</A>.<BR>
To select Peaches <A HREF="javascript:FruitBox(2,'peaches')">click here</A>.<BR>
To read the current value <A HREF="javascript:alert(window.document.myform.fruit.value)">click here</A>.
</FORM>

</BODY>
</HTML>

Try it.

See how that works? Keep studying it until you do.

Again, once you get past the most basic scripts, you'll find there are often several ways to acomplish the same thing. It is very important to understand that while arguments can be made that one way is better than another, or one way is less problematic than another, or one way is more efficient than another, the important thing is that it works. All other discussion falls behind "Does it get the job done?"

Let's take a small detour and look at this idea of sending a function more than one variable.

Consider the following...

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="javascript"><!--

function DoSomething(item1,item2)
{
 alert(item1 + item2)
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:DoSomething(1,'roses')">Click here</A>

</BODY>
</HTML>

Try it.

We send the function 2 quantities. The function then uses those quantities in it's execution.

Exercise: Build a script with five links....

Sonny
Tom
Fredo
Michael
Connie

Each link should send the following info to a function... name, age, and favorite color. When you click on a link, I want an alert box to pop up with a statement like so...

Sonny is 36 years old and his favorite color is red.

Now, notice that it says "his" favorite color. Connie is female, so it should read "her" favorite color. Build this script and figure out a way to solve the his/her problem.

Here is a solution.
Here is another solution.

Like I said, there's always more than one way to get the job done.

Alright, let's get back to forms and javascript...

Exercise: Make a form with four radio buttons. Label each of the buttons with the name of a color. When the user clicks a radio button, the background color of the page changes accordingly. Hint: although it's often tempting to place javascript commands right in the link, you may find that this can be a little limiting. Let's suppose you wanted to add something to the function. If all the commands are in the link, you'd have to change all the links everytime you wanted to alter the script. If all the links find a way to point to a function, all you have to do is play with the function. So, with that in mind, build it so that the function is what does the work.

Here is a solution.

<< BACK         NEXT >>
pagetutor.com



Invest in the future - Hug your kid today.